<template>
  <div class="user">
    <el-button type="text"
      @click="dialogFormVisible = true,handleData()"
      :style="{fontSize:'12px',float:'left',padding:'9px'}"
      :disabled="formVisible"
      >{{ userForm?'详情':'编辑' }}</el-button>
        <el-dialog title="用户信息详情" :visible.sync="dialogFormVisible" modal:false>
        <el-form :model="users" >
            <el-form-item label="用户名" >
            <el-input v-model="users.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" >
            <el-input v-model="users.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-input v-model="users.deptname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" >
                <el-input v-model="users.phoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" >
                <el-input v-model="users.mail" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" v-show="formDisable">确定</el-button>
        </div>
        </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'userDetail',
  data() {
    return {
      users: {},
      dialogFormVisible: false,
      formDisable: false,
    }
  },
  props: ['userForm', 'userEdit', 'formVisible'],
  methods: {
    handleData() {
      if (this.userForm) {
        this.users = this.userForm
        this.users.username = this.userForm.username
        this.users.realName = this.userForm.realName
        this.users.deptname = this.userForm.deptname
        this.users.phoneNumber = this.userForm.phoneNumber
        this.users.mail = this.userForm.mail
        this.formDisable = false
      } else {
        this.users = this.userEdit
        this.users.username = this.userEdit.username
        this.users.realName = this.userEdit.realName
        this.users.deptname = this.userEdit.deptname
        this.users.phoneNumber = this.userEdit.phoneNumber
        this.users.mail = this.userEdit.mail
        this.formDisable = true
      }
    },
  },
}
</script>
